import { useNavigation } from "@react-navigation/native";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { StackNavigationProp } from "../../types/routes";

const styles = StyleSheet.create({
  viewItem: {
    padding: 8,
    marginTop: 8,
    marginLeft: 8,
    marginRight: 8,
    backgroundColor: "white",
    borderRadius: 4
  }
});

type ViewItemProps = {
  to: Parameters<StackNavigationProp["navigate"]>[0];
  text: string;
};

function ViewItem({ to, text }: ViewItemProps) {
  const navigation = useNavigation<StackNavigationProp>();
  return (
    <View style={styles.viewItem}>
      <Pressable onPress={() => navigation.navigate(to)}>
        <Text>{text}</Text>
      </Pressable>
    </View>
  );
}

export default function ViewPage() {
  return (
    <View>
      <ViewItem to={{ name: "/demo/reanimated-hello-world", params: undefined }} text="Reanimated - Hello World" />
      <ViewItem to={{ name: "/demo/reanimated-animating-styles", params: undefined }} text="Reanimated - Animating Styles" />
      <ViewItem to={{ name: "/demo/reanimated-animating-props", params: undefined }} text="Reanimated - Animating Props" />
    </View>
  );
}

